<template>
  <div class="all">
    <div class="nav">
      <el-button class="btn" @click="resetForm('ruleForm')">返回</el-button>
      <el-button class="btn" type="primary" @click="submitForm('ruleForm')"
      >保存
      </el-button
      >
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户编码:" prop="name">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名:" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户性别:">
        <el-select v-model="ruleForm.sex" placeholder="请选择">
          <el-option label="女" value="1"></el-option>
          <el-option label="男" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日:" prop="name">
        <div class="block">
          <el-date-picker
            v-model="ruleForm.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="入职日期:" prop="name">
        <div class="block">
          <el-date-picker
            v-model="ruleForm.induction"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="部门:">
        <el-input v-model="ruleForm.dept"></el-input>
      </el-form-item>
      <el-form-item label="职位:">
        <el-input v-model="ruleForm.position"></el-input>
      </el-form-item>
      <el-form-item label="电话:" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item
        prop="email"
        label="邮箱:"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="用户角色:">
        <el-select v-model="ruleForm.role" placeholder="请选择">
          <el-option label="超级管理员" value="1"></el-option>
          <el-option label="总经理" value="2"></el-option>
          <el-option label="后勤部部长" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户头像:"
                    style="width: 365px"
                    :rules="[
                    { required: true},
                  ]">
        <el-input v-model="ruleForm.photo" style="width: 100%;display: inline"></el-input>
        <el-card style="width: 40px;height:40px;display: inline-block;float: right">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false"
            :on-change="handleChange">
            <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar">
            <span v-if="ruleForm.photo" class="el-upload-action" @click.stop="handleRemove()">
                    <i class="el-icon-delete"></i>
                </span>
            <i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>
          </el-upload>
        </el-card>
      </el-form-item>
      <el-form-item label="用户地址:"
                    class="checked"
                    :rules="[
                    { required: true},
                  ]">
        <el-input v-model="ruleForm.address" placeholder="请填入地址"></el-input>
      </el-form-item>
      <el-form-item label="备注:" class="checked">
        <el-input type="textarea" v-model="ruleForm.remark" placeholder="请添加备注"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { useraddApi } from '../../apis/addApi'
import axios from 'axios'
import store from '../../store'

export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      }
      callback()
    }
    return {
      ruleForm: {
        address: '',
        birthday: '',
        email: '',
        password: '',
        id: '',
        induction: '',
        name: '',
        phone: '',
        photo: '',
        dept: '',
        position: '',
        remark: '',
        role: '',
        sex: '1',
        state: '1',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 8,
            message: '长度在 1 到 8 个字符',
            trigger: 'blur'
          },
        ],
        phone: [
          {
            required: true,
            message: '手机号必填',
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        pass: [
          {
            required: true,
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        region: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
      },
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          useraddApi({ ...this.ruleForm }).then(res => {
            if (res.code !== 200) {
              this.$message({
                message: res.message,
                type: 'error',
              })
            }
          })
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$router.push('/list')
    },
    // 移除图片
    handleRemove () {
      this.ruleForm.photo = ''
    },
    // 上传成功回调
    handleAvatarSuccess (res, file) {
      this.ruleForm.photo = res.data.url
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload (file) {
      this.$message.error('图片上传失败，请重试！')
    },
    //文件改变时钩子
    handleChange (file) {
      axios.post('http://www.shuiyue.info:21000/file/upload/product', {
        'file': file.raw
      }, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'X-Token': store.getters['common/token']
        }
      }).then(res => {
        console.log(res.data.data[0].path)
        this.ruleForm.photo = res.data.data[0].path
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang='less'>
.nav {
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: solid 1px #999;
  overflow: hidden;

  > .btn {
    float: right;
    margin-left: 5px;
  }
}

.checked {
  display: block;
  width: 100%;
}

.demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
  font-weight: bolder;
}

.el-input__inner {
  width: 220px;
}

.avatar-uploader {
  width: 30PX;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: url("https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png") no-repeat;
  background-size: 100% 100%;
}

.avatar-uploader-icon {
  font-size: 0px;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.avatar-uploader-icon:hover {
  font-size: 20px;
  background-color: rgba(0, 0, 0, .3);
}

.avatar {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.el-card__body, .el-main {
  padding-left: 15%;
  padding-top: 15%;
}

.el-upload-action {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  color: #fff;
  text-align: center;
}

.el-upload-action:hover {
  font-size: 20px;
  background-color: #000;
  background-color: rgba(0, 0, 0, .3)
}


</style>
